<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子/文本阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #108881;
            margin: auto;

            /* box-shadow为盒子添加阴影 */
            /* h-shadow   必需 水平阴影的位置  允许负值*/
            /* v-shadow 必需 垂直阴影的位置  允许负值*/
            /* blur 可选  模糊尺寸*/
            /* spread 可选  阴影的尺寸*/
            /* color 可选 阴影的颜色*/
            /* insert 可选  将外部阴影改为内部阴影 */
            /* 默认的是外阴影（outside），但是不可以写这个单词，否则导致阴影无效 
            盒子阴影不占用空间，不会影响其他盒子排列  */
            /* box-shadow: h-shadow v-shadow blur spread color inset;  */
            box-shadow: -10px 10px 3px 3px rgba(101, 101, 102, .3);
        }

        span{
            color: #e1251b;
            /*  text-shadow: h-shadow v-shadow blur color; */
            /* h-shadow  必需  水平阴影的位置 允许负值
            v-shadow  必需 垂直阴影的位置  允许负值
            blur  可选  模糊的距离
            color 可选  阴影的颜色 */
            text-shadow: 2px 1px 2px pink;
        }
    </style>
</head>

<body>
    <div></div>
    <span>双木夕</span>
</body>

</html>